import { defineComponent, inject } from "vue";
import { handleMenuDrap } from "../../uitls/handleMenuDrap"
import "./editorPreview.css"
export default defineComponent({
  props: {
    containerRef: {
      type: Object
    },
    modelValue: { type: Object },
    handleModelValue: {
      type: Function
    }
  },
  setup(props) {
    const config = inject('config')
    const { onDragStart, onDragEnd } = handleMenuDrap(props); // 菜单拖拽功能
    return () => <div class="preview_box">
      {config.componentList.map(component => (
        <div class="preview_item pr"
          draggable
          ondragstart={e => onDragStart(e, component)}
          ondragend={e => onDragEnd(e)}
        >
          <div class="preview_label">{component.lable}</div>
          <div class="preview_content">{component.preview()}</div>
        </div>
      ))}
    </div>
  }
})